<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="queryForm" slot="header" :model="queryParams" :inline="true" label-width="100px">
			<el-form-item label="用户ID:" prop="uuid">
				<el-input v-model.trim="queryParams.uuid" placeholder="请输入用户ID" maxlength="6" clearable show-word-limit />
			</el-form-item>
			<el-form-item label="手机号码:" prop="mobile">
				<el-input v-model="queryParams.mobile" placeholder="请输入手机号码" maxlength="11" clearable show-word-limit />
			</el-form-item>

			<el-form-item label="邀请人ID:" prop="referrerUuid">
				<el-input v-model="queryParams.referrerUuid" clearable placeholder="请输入邀请人ID" />
			</el-form-item>
			<el-form-item label="用户状态:" prop="status">
				<el-select v-model="queryParams.status" placeholder="请选择用户状态">
					<el-option label="全部" :value="null"> </el-option>
					<el-option label="正常" :value="0"> </el-option>
					<el-option label="禁用" :value="1"> </el-option>
				</el-select>
			</el-form-item>

			<start-end-time ref="end" :get-time="getTime" title="会员结束时间:"></start-end-time>
			<start-end-time ref="child" :get-time="getEndTime" title="成为会员时间:"></start-end-time>
		</el-form>
		<div slot="card" class="mb-[24px] flex items-center">
			<l-statistical-card left-name="会员总数" :left-value="statistics.vipCount" :right-value="statistics.lastVipCount" />
		</div>
		<template slot="options">
			<l-search @search="getList" @refresh="resetQuery" />
			<el-button type="primary" @click="handleExport">
				<svg-icon icon-class="export" size="16px"></svg-icon>
				导出
			</el-button>
		</template>
		<el-table v-loading="loading" stripe :data="userList" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
			<el-table-column :formatter="emptyToString" type="index" label="序号" align="center"></el-table-column>
			<el-table-column :formatter="emptyToString" label="用户ID" align="center" prop="uuid" min-width="120" />
			<el-table-column :formatter="emptyToString" label="手机号码" align="center" prop="mobile" min-width="110" />
			<el-table-column :formatter="emptyToString" label="邀请人ID" align="center" prop="referrerUuid" min-width="120" />
			<el-table-column :formatter="emptyToString" label="会员类型" align="center" prop="userLevel" min-width="120"> </el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="用户状态" prop="status" min-width="156">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" active-text="开启" class="switch" inactive-text="禁用" @change="statusChange($event, scope.row.id)"></el-switch>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="会员结束时间" min-width="156" prop="svipEndTime">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.svipEndTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.svipEndTime).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="成为会员时间" min-width="156" prop="vipStartTime">
				<template slot-scope="scope">
					<div v-if="scope.row.startsVipTime" class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.startsVipTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.startsVipTime).format('HH:mm:ss') }}</span>
					</div>
					<div v-else class="w-full flex flex-col items-center">-</div>
				</template>
			</el-table-column>
		</el-table>

		<!-- 编辑 -->
		<l-dialog v-model="open" :title="title" :loading.sync="formLoading" width="453px" @formSubmit="editUserVipEndTime" @formClose="open = false">
			<el-form label-position="left" label-width="110px">
				<el-form-item label="用户ID:">
					<el-input :value="info.uuid" disabled />
				</el-form-item>
				<el-form-item label="手机号码:">
					<el-input :value="info.mobile" disabled />
				</el-form-item>
				<el-form-item label="会员结束时间:">
					<el-date-picker v-model="info.vipEndTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择会员结束时间"> </el-date-picker>
				</el-form-item>
			</el-form>
		</l-dialog>

		<l-dialog v-model="openDetails" title="详情" width="453px" :show-button="false" @formSubmit="openDetails = false">
			<el-form label-position="left" label-width="110px" disabled>
				<el-form-item label="用户ID:">
					<el-input :value="info.uuid" />
				</el-form-item>
				<el-form-item label="手机号码:">
					<el-input :value="info.mobile" />
				</el-form-item>
				<el-form-item label="邀请人ID:">
					<el-input :value="info.referrerUuid" />
				</el-form-item>
				<el-form-item label="账户余额:">
					<el-input :value="info.balance || 0" />
				</el-form-item>
				<el-form-item label="账户积分:">
					<el-input :value="info.cashIntegral || 0" />
				</el-form-item>
				<el-form-item label="用户类型:">
					<el-input :value="info.userLevel" />
				</el-form-item>
				<el-form-item label="会员开始时间:">
					<el-input :value="info.createTime" />
				</el-form-item>
			</el-form>
		</l-dialog>
	</l-page>
</template>

<script>
import { listUser, getUser, delUser, addUser, editUserVipEndTime, getUserInfo } from '@/api/mall/user';
import startEndTime from '@/components/StartEndTime';
import tableMixins from '@/mixins/table';
export default {
	name: 'Members',
	components: { startEndTime },
	mixins: [tableMixins],
	data() {
		return {
			// 遮罩层
			loading: true,
			date: [],
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 用户表格数据
			userList: [],
			openDetails: false,
			info: {},
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				userLevel: '会员',
				referrerUuid: null,
				id: null,
				username: null,
				password: null,
				mobile: null,
				status: null,
				vipStartTime: null,
				vipEndTime: null,
				vipStartTime2: null,
				vipEndTime2: null,
				type: 2,
				uuid: null,
			},
			// 表单参数
			form: {},
			formLoading: false,
			// 表单校验
			rules: {
				username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
				password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
				twoPassword: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
				gender: [
					{
						required: true,
						message: '性别：0 未知， 1男， 1 女不能为空',
						trigger: 'blur',
					},
				],
				lastLoginIp: [
					{
						required: true,
						message: '最近一次登录IP地址不能为空',
						trigger: 'blur',
					},
				],
				nickname: [
					{
						required: true,
						message: '用户昵称或网络名称不能为空',
						trigger: 'blur',
					},
				],
				mobile: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }],
				avatar: [{ required: true, message: '用户头像图片不能为空', trigger: 'blur' }],
				weixinOpenid: [
					{
						required: true,
						message: '微信登录openid不能为空',
						trigger: 'blur',
					},
				],
				sessionKey: [
					{
						required: true,
						message: '微信登录会话KEY不能为空',
						trigger: 'blur',
					},
				],
				status: [
					{
						required: true,
						message: '0 可用, 1 禁用, 2 注销不能为空',
						trigger: 'blur',
					},
				],
			},
			statistics: {
				vipCount: 0,
				lastVipCount: 0,
			},
		};
	},
	created() {
		this.getList();
		this.getStatistics();
	},
	methods: {
		getStatistics() {
			this.$request.get('/mall/user/queryUserStatistics').then((res) => {
				this.statistics = {
					...res.data,
				};
			});
		},
		statusChange(event, row) {
			this.$request
				.post('/mall/user/editUserStatus', {
					id: row,
					status: event,
				})
				.then(() => {
					this.msgSuccess('编辑成功');
					this.getList();
				});
		},
		handleClose() {
			this.openDetails = false;
		},

		/** 搜索用户列表 */
		handleDetail(id) {
			getUserInfo(id).then((response) => {
				this.info = response.data;
				this.openDetails = true;
			});
		},
		editUserVipEndTime() {
			this.loading = true;
			editUserVipEndTime({
				id: this.info.id,
				vipEndTime: this.info.vipEndTime,
			}).then((response) => {
				this.msgSuccess('编辑成功');
				this.getList();
				this.open = false;
			});
		},
		getList() {
			this.loading = true;
			if (this.queryParams.time) {
				this.queryParams.vipStartTime = this.queryParams.time[0];
				this.queryParams.vipEndTime = this.queryParams.time[1];
			}
			listUser(this.queryParams).then((response) => {
				response.data.records.forEach((item) => {
					if (item.svipEndTime) {
						item.svipEndTime = this.timeFilter(item.svipEndTime);
					}
				});
				this.userList = response.data.records;
				this.total = response.data.total;
				this.loading = false;
				this.setActionWidth();
			});
		},
		//时间换算
		timeFilter(val) {
			const time = new Date(val);
			const year = time.getFullYear();
			const mouth = time.getMonth() + 1 > 0 && time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
			const day = time.getDate() > 0 && time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
			const hour = time.getHours() >= 0 && time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
			const minute = time.getMinutes() >= 0 && time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
			const second = time.getSeconds() >= 0 && time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
			return `${year}-${mouth}-${day} ${hour}:${minute}:${second}`;
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				username: null,
				password: null,
				twoPassword: null,
				mobile: null,
				gender: null,
				birthday: null,
				lastLoginTime: null,
				lastLoginIp: null,
				userLevel: null,
				nickname: null,
				avatar: null,
				weixinOpenid: null,
				sessionKey: null,
				status: 0,
				delFlag: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
			};
			this.resetForm('form');
		},
		getTime(startTime, endTime) {
			this.queryParams.vipStartTime = startTime;
			this.queryParams.vipEndTime = endTime;
		},
		getEndTime(startTime, endTime) {
			this.queryParams.vipStartTime2 = startTime;
			this.queryParams.vipEndTime2 = endTime;
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.$refs.end.resetTime();
			this.$refs.child.resetTime();
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '新增';
		},
		/** 编辑按钮操作 */
		handleUpdate(row) {
			this.reset();
			const id = row.id;
			this.form.id = id;
			getUser(id).then((response) => {
				this.info = response.data;
				this.open = true;
				this.title = '编辑';
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.formLoading = true;
			this.$refs['form'].validate((valid) => {
				if (valid) {
					let obj = {
						mobile: this.form.mobile,
						password: this.form.password,
					};
					if (this.form.password.length < 6) {
						this.$message.error('密码不能小于6位数!');
						this.formLoading = false;
						return;
					}
					if (this.form.mobile.length != 11) {
						this.$message.error('电话号码格式有误!');
						this.formLoading = false;
						return;
					}
					if (this.form.password != this.form.twoPassword) {
						this.$message.error('2次密码输入不一致!');
						this.formLoading = false;
						return;
					}
					if (this.form.id != null) {
						obj.id = this.form.id;
						updateUser(obj)
							.then((response) => {
								this.msgSuccess('编辑成功');
								this.open = false;
								this.getList();
							})
							.finally(() => {
								this.formLoading = false;
							});
					} else {
						addUser(obj)
							.then((response) => {
								this.msgSuccess('新增成功');
								this.open = false;
								this.getList();
							})
							.finally(() => {
								this.formLoading = false;
							});
					}
				} else {
					setTimeout(() => {
						this.formLoading = false;
					}, 100);
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id ? [row.id] : this.ids;
			this.$confirm('是否确认删除用户编号为"' + ids + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delUser(ids);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download3('/mall/user/export', { ...this.queryParams }, `会员用户列表${new Date().getTime()}.xlsx`);
			// const queryParams = this.queryParams;
			// this.$confirm('是否确认导出所有用户数据项?', '警告', {
			// 	confirmButtonText: '确定',
			// 	cancelButtonText: '取消',
			// 	type: 'warning',
			// })
			// 	.then(function () {
			// 		return exportUser(queryParams);
			// 	})
			// 	.then((response) => {
			// 		this.download(response.msg);
			// 	});
		},
	},
};
</script>
<style scoped lang="scss">
.content {
	.time {
		width: 484px;
		height: 116px;
		background: #f7f7f7;
		padding: 24px;
		box-sizing: border-box;
		margin: 0 auto;

		.title {
			color: #333333;
			font-size: 12ppx;
			padding-bottom: 15px;
		}
	}
	.msg {
		color: #333333;
		font-size: 12px;
		width: 484px;
		margin: 0 auto;
		padding-bottom: 20px;
		> span {
			color: #f14a46;
			padding: 0 60px 0 15px;
		}
	}
	.content-info {
		border: 1px dashed #cccccc;
		border-radius: 10px;
		padding-bottom: 20px;
		.title {
			font-size: 16px;
			font-weight: 900;
			margin-bottom: 20px;
			// padding-left: 30px;
		}
		.image__preview {
			display: flex;
			justify-content: center;
			.image {
				width: 329px;
				height: 162px;
				margin: 0 10px;
				display: block;
				border-radius: 8px;
			}
		}
		.info {
			display: flex;
			margin-bottom: 10px;
			padding: 0 20px;
			> div {
				width: 50%;
				height: 30px;
				line-height: 30px;
				display: flex;
				color: #333333;
				justify-content: center;
				.label {
					width: 110px;
					font-size: 12px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					line-height: 60px;
					color: #808a97;
					opacity: 1;
				}
				.text {
					width: 125px;
					// background: #F7F7F7;
					font-size: 12px;
					box-sizing: border-box;
					font-family: Microsoft YaHei;
					font-weight: 400;
					line-height: 60px;
					color: #333333;
					opacity: 1;
					// padding-left: 12px;
					&.red {
						color: #f14a46;
					}
				}
			}
		}
		.info-plus {
			> div {
				width: 100%;
				.text {
					width: 593px;
				}
			}
		}
	}
}
</style>
